$(function() {
    // 获取百度接口经纬度数据
    //百度地图的开发者秘钥
    var token = '7nTMYlGhbdQz3SQ9ZBW6YuZuYaSGIykD';
    var url = 'http://api.map.baidu.com/geocoding/v3/?output=json&ak=' + token + '&address='
        // 获取两个dom对象
    var ePlaceInput = $('#place-input');
    var eSearchBtn = $('#search-btn');
    // 实例化echarts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 用于缓存数据 具有持续渲染的效果
    var chartData = [];
    // console.log(ePlaceInput, eSearchBtn);
    // 给搜索框绑定事件
    eSearchBtn.click(function() {
        // 获取表单的值
        var place = ePlaceInput.val();
        if (place) {
            // 发送ajax请求
            $.getJSON(url + place + '&callback=?',
                function(res) {
                    // console.log(res);
                    // 获取百度地图地址经纬度数据
                    if (res.status === 0) {
                        var loc = res.result.location;
                        chartData.push({
                            name: name,
                            value: [loc.lng, loc.lat]
                        });
                        drawMap(place);
                    } else {
                        alert('百度没有找到地址信息')
                    }
                })
        }
    });
    // 键盘事件
    ePlaceInput.keypress(function(e) {
            // 阻止浏览器默认行为
            e.preventDefault();
            if (e.keyCode === 13) {
                console.log(1);
                eSearchBtn.trigger('click');
            }
        })
        // 先调用一次渲染地图
    eSearchBtn.click();

    function drawMap(name, loc) {

        var option = {
            backgroundColor: '#404a59',
            title: {
                text: '2020想去的地方',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show: true
                    }
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemstyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [{
                name: name,
                type: 'scatter',
                coordinateSystem: 'geo',
                // 地址名字和坐标数据
                data: chartData,
                symbolSize: function(val) {
                    return 10;
                }
            }]
        }
        myChart.setOption(option)
    }

})